import React from 'react'
import Car from '../car/car.js'
import './settle.less'

import { connect } from "react-redux"
import action from '../../../store/action/index.js'

import * as APIS from "../../../apis/get_apis.js"
import { withRouter } from 'react-router-dom'

import cookies from 'js-cookie'

import axios from "axios"

// 引入弹窗
import SettlePop from './settle_pop.js'

class Settle extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: 'Settle',
            eatwaynum: 0,
            testarr: [],
            all_price: null,
            number: null,
            car_id: null,
            popisshow: false,//控制弹窗显示
            mySitedata: {},// 默认收货地址
        }
    }
    render() {
        let { eatwaynum, popisshow } = this.state
        // console.log(this.props);
        return (
            <div className="Settle">
                <div className="zw"></div>
                <div className="Sellte_head">
                    <div onClick={() => { this.goBack() }} className="iconfont icon-fanhui1 goback" style={{ transform: 'rotateY(180deg)' }}></div>
                    <div className="ctrl_dd" style={{ fontSize: `${.58}rem`, fontWeight: `900` }}>确认订单</div>
                    <div></div>
                </div>
                <div className="Settle_main">
                    {/* 商店地址 */}
                    <div className="Settle_position">
                        <div className="Settle_position_top">
                            <div className="Settle_position_info">
                                <p style={{ fontSize: `${.58}rem`, fontWeight: `900`, marginBottom: 0.1 + 'rem' }}>{
                                    JSON.parse(localStorage.getItem("shopPois")) === null ? "北京市巩华新村小区店" : JSON.parse(localStorage.getItem("shopPois"))

                                }</p>
                                <p style={{ fontSize: `${.34}rem` }}></p>
                            </div>
                            <div className="change" onClick={() => {
                                this.props.history.push({
                                    pathname: "/home2",
                                    query: this.props.history.location.pathname
                                })
                            }}>切换餐厅</div>
                        </div>
                        <div className="Settle_eatway" ref={(SetEatWay) => { this.SetEatWay = SetEatWay }}>
                            <div className="Settle_eatway_l" onClick={() => { this.eatWay(0) }} style={{ border: eatwaynum === 0 ? '2px solid rgb(179, 115, 19)' : '2px solid rgb(187, 187, 187)' }}>
                                <div className="iconfont icon-jiucan" style={{ fontSize: `${.9}rem`, fontWeight: `900`, color: eatwaynum === 0 ? 'rgb(179, 115, 19)' : 'rgb(145, 145, 145)' }}></div>
                                <div style={{ width: `${70}%` }}>
                                    <span style={{ color: eatwaynum === 0 ? 'rgb(179, 115, 19)' : 'rgb(145, 145, 145)' }}>堂食</span>
                                    <div style={{ color: eatwaynum === 0 ? 'rgb(179, 115, 19)' : 'rgb(145, 145, 145)' }}>店内用餐</div>
                                </div>

                            </div>
                            <div className="Settle_eatway_r" onClick={() => { this.eatWay(1) }} style={{ border: eatwaynum === 1 ? '2px solid rgb(179, 115, 19)' : '2px solid rgb(187, 187, 187)' }}>
                                <div className="iconfont icon-waimai" style={{ fontSize: `${.9}rem`, fontWeight: `900`, color: eatwaynum === 1 ? 'rgb(179, 115, 19)' : 'rgb(145, 145, 145)' }}></div>
                                <div style={{ width: `${70}%` }}>
                                    <span style={{ color: eatwaynum === 1 ? 'rgb(179, 115, 19)' : 'rgb(145, 145, 145)' }}>外带</span>
                                    <div style={{ color: eatwaynum === 1 ? 'rgb(179, 115, 19)' : 'rgb(145, 145, 145)' }}>外卖送餐</div>
                                </div>

                            </div>
                        </div>
                    </div>
                    {/* 商品详情 */}
                    <div className="Settle_godds_details">
                        {/* 标题 */}
                        <div className="Settle_godds_details_title" style={{ fontSize: `${.49}rem`, fontWeight: '600' }}>
                            商品详情
                        </div>
                        <p style={{ width: 90 + '%', height: 1 + 'px', background: 'rgb(200, 200, 200)', margin: '0 auto' }}></p>
                        {/* 商品列表 */}

                        {
                            this.props.cardata.map((item, index) => {
                                return <div key={item.car_id} className="Settle_godds_details_every">
                                    <div className="Settle_godds_details_every_l">
                                        <img src={item.commodity_images[0]} />
                                    </div>
                                    <div className="Settle_godds_details_every_c">
                                        <div style={{ fontSize: '.40rem', fontWeight: '600', marginBottom: '.3rem' }}>{item.commodity_namer}</div>
                                        <span style={{ fontSize: '.38rem', marginBottom: '.3rem', display: 'block' }}>{item.mess}</span>
                                        <div className="Settle_comp">
                                            <div className="Settle_minus" ref="Settle_minus" onClick={() => {
                                                this.setState({
                                                    all_price: ((Number(item.price) * 1000) * (Number(item.number) - 1)) / 1000,
                                                    number: Number(item.number) - 1,
                                                    car_id: item.car_id
                                                })
                                            }}>-</div>
                                            <div className="Settle_num">{item.number}</div>
                                            <div className="Settle_add" ref="Settle_add" onClick={() => {
                                                this.setState({
                                                    all_price: ((Number(item.price) * 1000) * (Number(item.number) + 1)) / 1000,
                                                    number: Number(item.number) + 1,
                                                    car_id: item.car_id
                                                })
                                            }}>+</div>
                                            <div className="Settle_godds_details_every_r" >￥{item.all_price}</div>
                                        </div>
                                    </div>
                                </div>
                            })
                        }
                        {/* 底部凹角，虚线样式 */}
                        <div style={{ width: '1px', height: '.26666rem' }}></div>
                        <div className="Settle_left_bottom">

                        </div>
                        <div className="Settle_dashed"></div>
                        <div className="Settle_right_bottom">

                        </div>
                    </div>
                    {/* 合计 */}
                    <div className="add_up_to">
                        <div style={{ fontSize: '.53rem', fontWeight: '600', textAlign: 'right' }}>
                            <span style={{ fontSize: '.33rem', fontWeight: '500' }}>合计￥</span>
                            {this.props.carMoney}
                            <p style={{ fontSize: '.33rem', fontWeight: '300', textDecoration: 'underline' }} onClick={() => {
                                this.changeSettlePop(true)
                            }}>！！了解我们的环保计划</p>
                        </div>

                    </div>
                </div>
                <Car style={{ position: 'flex', bottom: `${10}px` }}></Car>
                {
                    popisshow ?
                        <div className="settle_pop" ref="settle_pop" onClick={() => {
                            this.changeSettlePop(false)
                        }}>
                            <SettlePop changeSettlePop={this.changeSettlePop} popisshow={popisshow} />
                        </div>
                        : null
                }
            </div>
        )
    }

    eatWay = (index) => {
        this.setState({ eatwaynum: index })
    }

    goBack = () => {
        this.props.history.go(-1)
    }

    componentDidMount() {
        let { getCarData } = this.props
        // 获取购物车数据
        getCarData({
            user_id: cookies.get('user_id')
        });
        // 设置防抖
        // console.log(document.querySelectorAll(".Settle_minus"));
        [...document.querySelectorAll(".Settle_minus")].forEach(item => {
            item.addEventListener("click", this.debounce(this.countCarNum, 200))
        });

        [...document.querySelectorAll(".Settle_add")].forEach(item => {
            item.addEventListener("click", this.debounce(this.countCarNum, 200))
        });

        axios({
            method: 'post',
            url: '/api/front_end/getSite',
            data: {
                user_id: cookies.get('user_id')
            }
        }).then(res => {
            console.log(res.data);
            let obj, arr;
            if (res.data.code === '01') {
                let { data } = res.data
                arr = data.filter(item => {
                    if (item.status === "1") {
                        return item
                    }
                });
                if (data.length > 0) {
                    obj = arr[0]
                } else {
                    obj = data[0]
                }
                this.setState({ mySitedata: obj })
            }
        })
    }

    // 点击执行函数
    countCarNum = () => {
        // 点击修改
        APIS.changeCarData({
            all_price: this.state.all_price,
            number: this.state.number,
            car_id: this.state.car_id
        }).then(res => {
            // console.log(res);
            // 删除成功 调取购物车接口
            this.props.getCarData({
                user_id: cookies.get('user_id')
            })

            if (this.state.number < 1) {//删除单条数据
                APIS.delCarData({
                    types: "",
                    user_id: cookies.get('user_id'),
                    car_id: this.state.car_id
                }).then(res => {
                    // 删除成功 调取购物车接口
                    this.props.getCarData({
                        user_id: cookies.get('user_id')
                    })
                    // 如果购物车长度为零 关闭购物弹窗
                })
            }
        })
    }

    changeSettlePop = (boolean) => {
        if (boolean === true) {
            this.setState({ popisshow: boolean })
            setTimeout(() => {
                this.refs["settle_pop"].style.left = 0
            }, 200)

        } else if (boolean === false) {
            this.refs["settle_pop"].style.top = "100vh"
            setTimeout(() => {
                this.setState({ popisshow: boolean })
            }, 500)
        }
    }

    debounce = (func, wait) => {
        let time = wait || 200
        let timer;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func()
            }, time)
        }
    }
}
export default connect(state => state.foodf, action.foodf)(withRouter(Settle))